<template>
    <div class="merchant-audit-page">
        <h1 class="page-title">商户审核</h1>
        <!-- 搜索查询区域 -->
        <div class="search-container">
            <el-input
                v-model="searchKey"
                placeholder="输入商户名称查询"
                suffix-icon="el-icon-search"
                @keyup.enter="handleSearch"
                style="width: 300px; margin-right: 10px"
            ></el-input>
            <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
        </div>

        <el-table :data="pendingMerchants" style="width: 100%" stripe border>
            <el-table-column prop="name" label="商户名称" width="180"></el-table-column>
            <el-table-column prop="contactName" label="联系人" width="120"></el-table-column>
            <el-table-column prop="contactPhone" label="联系电话" width="150"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="审核操作" width="180">
                <template #default="scope">
                    <el-button type="success" size="mini" @click="approveMerchant(scope.row)"
                               :style="{ transition: 'all 0.3s ease' }">通过</el-button>
                    <el-button type="danger" size="mini" @click="rejectMerchant(scope.row)"
                               :style="{ transition: 'all 0.3s ease' }">拒绝</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-footer>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="ListPage"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-footer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchKey: '',
            pendingMerchants: [],
            current: 1, // 初始化当前页码
            size: 10, // 初始化每页数量
            vo: {
                name: '',
                status: 0
            },// 初始化查询条件对象
            ListPage: [10, 20, 30, 40, 50],
            total: 0,
        };
    },
    methods: {
        approveMerchant(merchant) {
            // 修改接口地址为新添加的接口
            this.$axios.post(`/merchant/approveAndUpdateUser/${merchant.merchantId}`)
                .then(r => {
                    if (r.data) {
                        this.pendingMerchants = this.pendingMerchants.filter(item => item.merchantId!== merchant.merchantId);
                        this.$message.success('审核通过');
                    } else {
                        this.$message.error('审核失败');
                    }
                })
                .catch(error => {
                    console.error('请求出错：', error);
                    this.$message.error('请求出错，请稍后重试');
                });
        },
        rejectMerchant(merchant) {
            this.$axios.post(`/merchant/reject/${merchant.merchantId}`)
                .then(r => {
                    if (r.data) {
                        this.pendingMerchants = this.pendingMerchants.filter(item => item.merchantId!== merchant.merchantId);
                        this.$message.success('审核拒绝');
                    } else {
                        this.$message.error('审核失败');
                    }
                })
                .catch(error => {
                    console.error('请求出错：', error);
                    this.$message.error('请求出错，请稍后重试');
                });
        },
        search() {
            this.$axios.post(`/merchant/selectByStatusZero/${this.current}/${this.size}`, this.vo)
                .then(r => {
                    // ✅ 修复：将数据赋值给表格绑定的 pendingMerchants
                    this.pendingMerchants = r.data.list;
                    this.total = r.data.total;
                })
                .catch(error => {
                    console.error('请求出错：', error);
                    this.$message.error('请求出错，请稍后重试');
                });
        },
        handleSearch() {
            this.vo.name = this.searchKey;
            this.search();
        },
        handleSizeChange(val) {
            this.size = val;
            this.search();
        },
        handleCurrentChange(val) {
            this.current = val;
            this.search();
        },
    },
    created() {
        this.search();
    }
};
</script>

<style scoped>
.merchant-audit-page {
    padding: 20px;
    background-color: #f9f9f9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.page-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

.el-table {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-table th {
    background-color: #e9ecef;
    font-weight: 600;
    color: #555;
}

.el-table td {
    transition: background-color 0.3s ease;
}

.el-table tr:hover td {
    background-color: #f0f0f0;
}

.el-button:hover {
    transform: scale(1.05);
}
</style>